<template>
    <div class="app">
		<template v-if="!$util.isEmpty(list.data)">
			<div class="league-list"
				v-for="(item, index) in list.data"
				:key="index">
					<div class="league-info_box">
						<img :src="item.user_picture" alt="企业logo">
						<div class="league-info_right">
							<h3>{{item.nick_name}}</h3>
							<div class="des">{{item.role_name}}</div>
							<div class="des">
								{{ `已服务${$util.isEmpty(item.service_master)?0:item.service_master}
								名业主 I ${$util.isEmpty(item.work_experience)?0:item.work_experience}年资质`
								}}
							</div>
						</div>
					</div>
				<div class="league-status_box">
					<span class="item"
						v-for="(i, index) in item.goods_at"
						:key="index">
						{{i}}
					</span>
				</div>
			</div>
		</template>
		<AppWrapperEmpty
			type="noData"
			:finished="list.finished"
			:is-loading="list.loading"
			title="无数据"
			:is-empty="$util.isEmpty(list.data)"
            />
    </div>
</template>

<script>
import { getSiteTeam } from '@/api/constructionSite/index'
import { list } from '@/mixins'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
export default {
	name: 'team',
	components: {
		AppWrapperEmpty
	},
	inject: ['queryData'],
	mixins: [list],
	data() {
		return {
			query: {}
		}
	},
	mounted() {
		this.query = this.queryData()
		this.init()
	},
	methods: {
		init() {
			return getSiteTeam({
				id: this.query.id,
				page: this.list.page,
				page_size: this.list.limit
			}).then(res => {
				this.completes(res)
			})
		}
	}

}
</script>

<style lang="scss" scoped>
    * {
		box-sizing: border-box;
	}
    .app {
        padding: 30px 30px 100px;
    }
    .league-list {
			margin-top: 20px;
			background-color: #FFFFFF;
			padding: 30px;
			border-radius: 20px;
            box-shadow:0px 1px 21px 0px rgba(78,78,78,0.15);
			& .league-info_box {
				display: flex;
				justify-content: center;
				align-items: center;

				& > img {
					width: 120px;
					height: 120px;
					background: rgba(255, 255, 255, 1);
					border: 1Px solid rgba(238, 238, 238, 1);
					border-radius: 50%;
				}

				.league-info_right {
					padding-left: 20px;
					flex: 1;

					& > h3 {
						color: #333333;
						font-size: 32px;
						font-weight: 600;
					}

					& .des {
						color: #666666;
						font-size: 24px;
						font-weight: 400;
						margin: 10px 0;
					}

					& > .des:nth-of-type(1) {
						margin: 17px 0 24px;
					}
				}

			}

			& .league-status_box {
				margin-top: 30px;

				& .item {
					display: inline-block;
					padding: 6px 12px;
					color: #FF9000;
					font-weight: 400;
					font-size: 24px;
					margin-right: 10px;
					background-color: #FFF6D1;
					margin-bottom: 10px;
				}
			}
		}
</style>
